// 新建一个router文件夹和一个index.js文件。这个文件是路由的配置文件

// 引入路由的资源
import VueRouter from 'vue-router'
import Vue from 'vue'

// 导入需要的组件
// import HelloWorld from '../components/HelloWorld.vue'
// import ComA from '../components/ComA.vue'
// import Big from '../components/Big.vue'
// import NotFound from '../components/NotFound.vue'
// import Layout from '../pages/Layout.vue'
// import mid1 from '../components/Vmid1.vue'
// import mid2 from '../components/Vmid2.vue'
// import mid3 from '../components/Vmid3.vue'
// import List from '../pages/List.vue'
// import Detail from '../pages/Detail.vue'

// 引入组件的方式改造成懒加载的方式
let HelloWorld = () => import('../components/HelloWorld.vue')
let ComA = () => import('../components/ComA.vue')
let Big = () => import('../components/Big.vue')
let NotFound = () => import('../components/NotFound.vue')
let Layout = () => import('../pages/Layout.vue')
let mid1 = () => import('../components/Vmid1.vue')
let mid2 = () => import('../components/Vmid2.vue')
let mid3 = () => import('../components/Vmid3.vue')
let Detail = () => import('../pages/Detail.vue')
let Cart = () => import('../pages/Cart.vue')
let Vuex = () => import('../pages/Vuex.vue')
let VuexCai = () => import('../pages/VuexCai.vue')
let List = () => import('../pages/List.vue')
let Axios = () => import('../pages/Axios.vue')
let Login = () => import('../components/Login.vue')

// 在vue中使用路由
Vue.use(VueRouter)

// 路由表--url和组件的对应关系,合理定义规则
const routes = [
    {
        path: '/',
        component: HelloWorld,
        meta: {
            title: '首页',
            needLogin: false
        }
    },
    {
        path: '/login',
        component: Login,
        meta: {
            title: '登陆页',
            needLogin: false
        }
    },
    {
        path: '/coma',
        component: ComA,
        meta: {
            title: 'coma',
            needLogin: true
        }
    },
    {
        path: '/layout',
        component: Layout,
        meta: {
            title: '布局',
            needLogin: true
        },
        // 子路由,二级路由
        children: [
            {
                path: '/layout/mid1', // 二级路由中加了斜线，就需要写成完整的路径
                component: mid1,
                meta: {
                    title: '布局-1',
                    needLogin: true
                },
            },
            {
                path: 'mid2',
                component: mid2,
                meta: {
                    title: '布局-2',
                    needLogin: true
                },
            },
            {
                path: '', // 默认的子路由，就是将子路由写成空值，完整的url就是父路由+空的子路由
                component: mid3,
                meta: {
                    title: '布局-3',
                    needLogin: true
                },
            }
        ]
    },
    {
        path: '/list',
        component: List,
        meta: {
            title: '歌曲列表页',
            ele: true, // 饿了吗？ 饿了
            needLogin: false // 这里也可以加上权限的校验等其他数据
        }
    },
    {
        path: '/cart',
        component: Cart
    },
    {
        path: '/axios',
        component: Axios
    },
    {
        path: '/vuex',
        component: Vuex
    },
    {
        path: '/vuexcai',
        component: VuexCai,
        meta: {
            title: '菜鸟'
        }
    },
    {
        path: '/detail/:id', // 动态路由，路由中包含变量，同一格式的url是经过同一个组件来渲染的
        component: Detail,
        meta: {
            title: '歌曲详情页',
            needLogin: false
        }
    },
    {
        path: '/big',
        name: 'my-big', // 命名路由.当要跳转的路由对象的path很长的时候，可以用name
        component: Big,
        beforeEnter(to, from, next) { // 使用场景：少数几个页面
            console.log(66, to);
            console.log(77, from);
            next()
        }
    },
    // {
    //     path: '*', //  * 是通配符，可以匹配所有地址，放在最后处理。会保留错误地址
    //     component: NotFound
    // }
    // ==========================
    {
        path: '/404',
        component: NotFound
    },
    {
        path: '*', // redirect重定向，会跳转到指定页面
        redirect: '/404'
    }
]

// 创建一个路由实例
const router = new VueRouter({
    // 各个配置项
    // 最核心的--路由表，对应规则
    routes: routes,
    // 路由模式--默认是hash模式，带有#；常用的是history
    mode: 'history',
    // 前缀
    // base: '/aaa'
    // 滚动行为，对于一些特别长的页面，可以记录滚动高度
    scrollBehavior(to, from, saveP) {
        // 指定页面滚动
        // if (to.path === '/xxxx' || to.path === '/yyyy') {
        //     return {
        //         x: 0,
        //         y: 500
        //     }
        // }else {
        //     return {
        //         x: 0,
        //         y: 0
        //     }
        // }

    }
})

// 全局前置路由守卫--管着所以你页面的跳转，发生在浸润新页面之前
router.beforeEach((to, from, next) => {
    // console.log(111, to); // to是正要去的路由对象
    // console.log(222, from);// from是正在离开的老的路由对象
    // 统一修改页面标题
    document.title = to.meta.title || 'vue-练习'
    // 判断用户是否登陆，需要两个数据：1，页面是否需要登陆；2.用户是否已经登陆
    let isLogin = JSON.parse(localStorage.getItem('isLogin'));
    if (to.meta.needLogin) {
        // 当前页面需要登陆
        if (isLogin) { // 判断用户是否登陆
            // 将执行权交给下一个中间件，使代码继续执行
            next()
        } else {
            // 用户未登陆
            next('/login')
        }
    } else {
        // 当前页面不需要登陆
        next()
    }

})
export default router